<!DOCTYPE html>
<html>
	<head>
		<title>工具栏、分页栏表格</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>
		<link rel="stylesheet" type="text/css" href="../../../plugin/bootstrap/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="../../../plugin/bootstrap/css/bootstrap-ext.css">
		<script type="text/javascript" src="../../../plugin/jquery/jquery.js">
</script>
		<script type="text/javascript" src="../../../plugin/bootstrap/js/bootstrap.js">
</script>
	</head>
	<body>
		<form style="padding-top: 2px;">
			<table width="100%" class="form-table">
				<tr>
					<td width="15%" class="form-label">
						名称：
					</td>
					<td width="20%">
						<input type="text" class="form-control" />
					</td>
					<td width="15%" class="form-label">
						类型：
					</td>
					<td width="20%">
						<select class="form-control">
							<option>
								软件
							</option>
							<option>
								硬件
							</option>
						</select>
					</td>
					<td width="15%" class="form-label">
						类型：
					</td>
					<td width="15%">
						<label class="radio-inline">
							<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
							测试
						</label>
						<label class="radio-inline">
							<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
							测试
						</label>
					</td>
				</tr>
				<tr>
					<td width="15%" class="form-label">
						名称：
					</td>
					<td width="20%">
						<input type="text" class="form-control" />
					</td>
					<td width="15%" class="form-label">
						类型：
					</td>
					<td width="20%">
						<select class="form-control">
							<option>
								软件
							</option>
							<option>
								硬件
							</option>
						</select>
					</td>
					<td width="30%" class="form-btn" colspan="2">
						<button class="btn btn-primary glyphicon glyphicon-search">查询</button>
						<button type="reset" class="btn btn-default glyphicon glyphicon-repeat">重置</button>
					</td>
				</tr>
			</table>
		</form>
		<div class="toolbar" style="padding-left: 2px; padding-right: 2px;">
			<div class="toolbar-btn pull-left">
				<button class="btn btn-default glyphicon glyphicon-plus">新增</button>
				<button class="btn btn-default glyphicon glyphicon-save">导出</button>
			</div>
			<div class="toolbar-tip pull-right">
				<span>
					每页显示
				</span>
				<select class="form-control" style="width: 72px; display:inline-block;">
					<option>
						10
					</option>
					<option>
						20
					</option>
					<option>
						50
					</option>
					<option>
						100
					</option>
				</select>
				<span>
					条
				</span>
			</div>
		</div>
		<table class="table table-bordered table-hover" style="margin-bottom: 8px;">
			<thead>
				<tr>
					<th width="16">
						<input type="checkbox" />
					</th>
					<th width="100">
						序号
					</th>
					<th width="200">
						名称
					</th>
					<th width="100">
						类型
					</th>
					<th>
						说明
					</th>
					<th width="150">
						更新日期
					</th>
					<th width="120">
						用户操作
					</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td style="text-align: center;">
						<input type="checkbox" />
					</td>
					<td>
						1001
					</td>
					<td>
						第1个产品
					</td>
					<td style="text-align: center;">
						软件
					</td>
					<td>
						这是第一款软件类产品，这里省略很多字……
					</td>
					<td style="text-align: center;">
						2013/12/28 18:24:58
					</td>
					<td style="text-align: center;">
						<a href="#">详细</a>
						<a href="#">修改</a>
						<a href="#">删除</a>
					</td>
				</tr>
				<tr>
					<td style="text-align: center;">
						<input type="checkbox" />
					</td>
					<td>
						1002
					</td>
					<td>
						第2个产品
					</td>
					<td style="text-align: center;">
						软件
					</td>
					<td>
						Hello World
					</td>
					<td style="text-align: center;">
						2013/12/28 18:24:58
					</td>
					<td style="text-align: center;">
						<a href="#">详细</a>
						<a href="#">修改</a>
						<a href="#">删除</a>
					</td>
				</tr>
				<tr>
					<td style="text-align: center;">
						<input type="checkbox" />
					</td>
					<td>
						1003
					</td>
					<td>
						第3个产品
					</td>
					<td style="text-align: center;">
						软件
					</td>
					<td>
						Hello World
					</td>
					<td style="text-align: center;">
						2013/12/28 18:24:58
					</td>
					<td style="text-align: center;">
						<a href="#">详细</a>
						<a href="#">修改</a>
						<a href="#">删除</a>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="pagebar" style="padding-left: 2px; padding-right: 2px;">
			<div class="pull-left" style="padding-top: 6px;">
				<span>显示第1~20条&nbsp;&nbsp;共208条记录</span>
			</div>
			<ul class="pagination pull-right" style="margin-top: 0px; margin-bottom: 0px;">
				<li>
					<a href="#" class="glyphicon glyphicon-step-backward">首页</a>
				</li>
				<li>
					<a href="#" class="glyphicon glyphicon-triangle-left">上一页</a>
				</li>
				<li>
					<span style="border:0; height:32px; padding-top:2px; color:#000;">第&nbsp;<input type="text" class="form-control" value="3" style="padding-left:1px; padding-right:1px; width: 34px; height:30px; text-align:center; display:inline-block;"/>&nbsp;/&nbsp;28&nbsp;页</span>
				</li>
				<li>
					<a href="#" class="glyphicon glyphicon-triangle-right">下一页</a>
				</li>
				<li>
					<a href="#" class="glyphicon glyphicon-step-forward">尾页</a>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
</script>
</html>
